<template>
    <div class="postbox">
        <div class="search" v-show="isShow">
            <div class="search-inner">
                <h4>岗位编码</h4>
                <el-input v-model="searchC.postCode" placeholder="请输入岗位编码" clearable />
            </div>
            <div class="search-inner">
                <h4>岗位名称</h4>
                <el-input v-model="searchC.postName" placeholder="请输入岗位名称" clearable />
            </div>
            <div class="search-inner">
                <h4>状态</h4>
                <el-select v-model="searchC.status" class="m-2" placeholder="岗位状态">
                    <el-option label="正常" :value="0" />
                    <el-option label="停用" :value="1" />
                </el-select>
            </div>
            <div>
                <el-button type="primary" :icon="Search" @click="searchpost1">搜索</el-button>
                <el-button :icon="Refresh" @click="queryTypeList">重置</el-button>
            </div>
        </div>
        <div class="btns">
            <div>
                <el-button type="primary" plain :icon="Plus" @click="AddPost">新增</el-button>
                <el-button type="success" plain :icon="EditPen" :disabled="multipleSelection.length == 1 ? false : true"
                    @click="getPost(postid)">修改</el-button>
                <el-button type="danger" plain :icon="Delete" :disabled="multipleSelection.length != 0 ? false : true"
                    @click="delPosts(postids)">删除</el-button>
                <el-button type="warning" plain :icon="Download" @click="exportpost1">导出</el-button>
            </div>

            <div>
                <el-tooltip :content="isShow ? '隐藏搜索' : '显示搜索'" placement="top">
                    <el-button @click="isShow = !isShow" :icon="Search" circle />
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                    <el-button @click="searchpost1" :icon="Refresh" circle />
                </el-tooltip>
            </div>
        </div>
        <div class="eltable">
            <el-table ref="multipleTableRef" :data="typeList" table-layout="auto" width="100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="岗位编号" prop="postId">
                </el-table-column>
                <el-table-column property="岗位编码" label="岗位编码" prop="postCode" />
                <el-table-column property="岗位名称" label="岗位名称" prop="postName" />
                <el-table-column label="岗位排序" prop="postSort"></el-table-column>
                <el-table-column label="状态">
                    <template #default="{ row }">
                        <el-tag v-show="row.status == 0">正常</el-tag>
                        <el-tag v-show="row.status == 1" type="danger">停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <a class="editpen" @click="getPost(row.postId)"><el-icon>
                                <EditPen />
                            </el-icon>修改</a>
                        <a @click="delPosts(row.postId)">
                            <el-icon>
                                <Delete />
                            </el-icon>删除
                        </a>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <ElConfigProvider :locale="zhCn">
                <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                    :page-sizes="[10, 20, 30, 40, 50]" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total=total @size-change="queryTypeList"
                    @current-change="queryTypeList" />
            </ElConfigProvider>
        </div>
        <!-- 对话框 -->
        <el-dialog v-model="dialogEditType" :title="title" style="margin-top: 15vh;width: 500px;">
            <el-form :model="form2" label-width="80px">
                <el-form-item label="岗位名称">
                    <el-input v-model="form2.postName" placeholder="请输入岗位名称" />
                </el-form-item>
                <el-form-item label="岗位编码">
                    <el-input v-model="form2.postCode" placeholder="请输入编码名称" />
                </el-form-item>
                <el-form-item label="岗位顺序">
                    <el-input-number v-model="form2.postSort" class="mx-4" :min="0" :max="10" controls-position="right"
                        @change="handleChange" />
                </el-form-item>
                <el-form-item label="岗位状态">
                    <el-radio-group v-model="form2.status">
                        <el-radio label="0">正常</el-radio>
                        <el-radio label="1">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="AddPost2" v-if="btnShow">确定</el-button>
                    <el-button type="primary" @click="EditPost2" v-else>确定</el-button>
                    <el-button @click="dialogEditType = false">
                        取消
                    </el-button>
                </span>
            </template>
        </el-dialog>

    </div>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElButton, ElDialog, ElForm, ElFormItem, ElIcon, ElInput, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElPagination, ElRadio, ElRadioGroup, ElSelect, ElTable, ElTableColumn, ElTag, ElTooltip, UploadFile } from 'element-plus'
import { Plus, EditPen, Delete, Download, Search, Refresh } from '@element-plus/icons-vue'
import { getPostList, getPostId, AddPostApi, editPost, delPost, searchPost, exportPost } from './api/index'
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { saveAs } from 'file-saver';

const title = ref("")
const isShow = ref(true)
// 分页器
const total = ref(0)
const background = ref(true)
const disabled = ref(false)

const btnShow = ref(true)

// 步进器

const handleChange = (value: any) => {
    console.log(value)
}

interface User {
    date: string
    name: string
    address: string
    postId: number
}
const postid = ref(0)
const postids = ref<any>([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
    postid.value = val[0].postId
    postids.value = val.map(item => item.postId)
    console.log(postid, val[0].postId, "9999999999");
}

// 页面数据
const typeList = ref<IResourceEdit[]>([]);
const queryParams = reactive<IResourcePost>({
    pageNum: 1,
    pageSize: 10,
});
// 请求数据
const queryTypeList = () => {
    getPostList(queryParams).then((res) => {
        if (res.code === 200) {
            typeList.value = res.rows
            total.value = res.total
            console.log(res.rows, '66666666')
        }
    });
};
queryTypeList()


// 删除
const delPosts = (id: any) => {
    ElMessageBox.confirm(
        `是否确认删除【请填写功能名称】编号为"${id}"的数据项？`,
        '系统提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        delPost(id)
        queryTypeList()
        ElMessage({
            type: 'success',
            message: '删除成功',
        });

    }).catch(() => {
    })
}
// 搜索
const searchC = reactive<IResourceSearchPost>({
    pageNum: 1,
    pageSize: 10,
})

const searchpost1 = () => {
    searchPost(searchC).then((res) => {
        typeList.value = res.rows
        total.value = res.total
    })
}

// post修改
const dialogEditType = ref(false)

const form2 = reactive<IResourceAdd>({
    postName: '',
    postCode: '',
    postSort: '',
    status: '0',
    createTime: '',
})

const getPost = (id: number) => {
    title.value = "修改岗位"
    btnShow.value = false
    dialogEditType.value = true
    getPostId(id).then((res) => {
        if (res.code === 200) {
            let { postId, postName, postCode, postSort, status } = res.data
            form2.postId = postId
            form2.postName = postName
            form2.postCode = postCode
            form2.postSort = postSort
            form2.status = status
        }

    })
}
// 确定修改
const EditPost2 = () => {
    editPost(form2).then((res) => {
        if (res.code === 200) {
            dialogEditType.value = false
            queryTypeList()
        }
    })
}

// post新增
const AddPost = () => {
    title.value = "添加岗位"
    form2.postId = undefined
    form2.postName = ""
    dialogEditType.value = true
    btnShow.value = true
}
const AddPost2 = () => {
    AddPostApi(form2).then((res) => {
        if (res.code === 200) {
            dialogEditType.value = false
            queryTypeList()
        }
    })
}

// 导出
const exportpost1 = () => {
    exportPost(
        {
            pageNum: 1,
            pageSize: 10,
        },
        {
            //导出文件的请求需要额外配置
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            responseType: "blob",
        }
    ).then((res) => {
        if (!res) return;
        console.log(res, 'res');

        saveAs(new Blob([res as any]),
            `客户档案_${new Date().getTime()}.xlsx`
        );
    })
}



</script>
<style lang="less" scoped>
.postbox {
    margin-top: 35px;

    .search {
        display: flex;
        line-height: 30px;
        margin-bottom: 20px;

        .search-inner {
            display: flex;
            padding-right: 10px;

            h4 {
                width: 110px;
            }
        }
    }

    .btns {
        display: flex;
        justify-content: space-between;
        text-align: left;

        :deep(.el-form-item) {
            .el-upload__tip {
                font-size: 12px;
                margin-left: 20px;
            }
        }
    }

    .eltable {
        :deep(.el-table__cell) {
            text-align: center;
        }

        .editpen {
            margin-right: 20px;
        }
    }

    .pagination {
        display: flex;
        flex-direction: row-reverse;
        padding: 10px 20px;
        margin-top: 15px;
    }
}
</style>